<template>
	<div class="moPersonal">
		<div class="personalCont_Cont_mob">
			<div class="personalCont_Cont_mob_info" v-if="!mouserName">
				<div class="personalCont_Cont_mob_info_top">
					<router-link :to="{name:'home'}"></router-link>
					<a @click="close()" v-if="mouserName">注销</a>
				</div>
				<div class="logiregi">
					<a @click="mologin()">登录</a>
					<a>/</a>
					<a @click="morefgit()">注册</a>
				</div>
				<div class="personalCont_Cont_mob_userInfo" v-if="!mouserName">{{mouserName}}</div>
			</div>
			<div class="personalCont_Cont_mob_info" v-if="mouserName">
				<div class="personalCont_Cont_mob_info_top">
					<text @click="toHome">首页</text>
					<a @click="close()">注销</a>
				</div>
				<div class="personalCont_Cont_mob_info_content">
					<div class="personalCont_Cont_mob_info_left">
						<div class="personalCont_Cont_mob_info_left_touxiang">
							<i class="iconfont icon-gerenzhongxinxuanzhong-copy-copy"></i>
						</div>
						<div class="personalCont_Cont_mob_userInfoB">{{mouserName}}</div>
					</div>
					<div class="personalCont_Cont_mob_info_right" @click="tomenuVIP()">
						开通VIP
					</div>
					<div style="clear:both;"></div>
				</div>
			</div>
			<div class="personalCont_Cont_mob_content">
				<div class="personalCont_Cont_mob_content_personInfo">
					<div class="personalCont_Cont_mob_content_personInfo_tit">个人信息</div>
					<ul>
						<li @click="tomenumdei('/moPersonal/amending')">
							<i class="iconfont icon-qingdan"></i>
							<a>修改信息</a>
							<i class="iconfont icon-youjiantou"></i>
						</li>

						<li @click="tomenumdei('/moPersonal/record')">
							<i class="iconfont icon-jurassic_user"></i>
							<a>下载记录</a>
							<i class="iconfont icon-youjiantou"></i>
						</li>

						<li @click="tomenumdei('/moPersonal/collect')">
							<i class="iconfont icon-shoucang"></i>
							<a>我的收藏</a>
							<i class="iconfont icon-youjiantou"></i>
						</li>

						<li @click="tomenumdei('/moPersonal/dingyue')">
							<i class="iconfont icon-dingyue"></i>
							<a>我的订阅</a>
							<i class="iconfont icon-youjiantou"></i>
						</li>

						<li @click="tomenumdei('/moPersonal/streatab')">
							<i class="iconfont icon-kecheng"></i>
							<a>我的课程</a>
							<i class="iconfont icon-youjiantou"></i>
						</li>
					</ul>
				</div>

				<div class="personalCont_Cont_mob_content_wenxiInfo">
					<div class="personalCont_Cont_mob_content_personInfo_tit">文献检测</div>
					<ul>
						<li @click="tomenumdei('/moPersonal/newjiance')">
							<i class="iconfont icon-chakan1"></i>
							<a>新文献检测</a>
							<i class="iconfont icon-youjiantou"></i>
						</li>

						<li @click="tomenumdei('/moPersonal/jiance')">
							<i class="iconfont icon-xindianjiance"></i>
							<a>检测信息</a>
							<i class="iconfont icon-youjiantou"></i>
						</li>
					</ul>
				</div>
				<div class="personalCont_Cont_mob_content_activeInfo">
					<div class="personalCont_Cont_mob_content_personInfo_tit">活动信息</div>
					<ul>
						<li @click="tomenumdei('/moPersonal/learnmi')">
							<i class="iconfont icon-xunzhang"></i>
							<a>我的学米</a>
							<i class="iconfont icon-youjiantou"></i>
						</li>

						<li @click="tomenumdei('/moPersonal/vipcenter')">
							<i class="iconfont icon-VIP"></i>
							<a>VIP中心</a>
							<i class="iconfont icon-youjiantou"></i>
						</li>

						<li @click="tomenumdei('/moPersonal/active')">
							<i class="iconfont icon-kongxinwujiaoxing"></i>
							<a>我的邀请</a>
							<i class="iconfont icon-youjiantou"></i>
						</li>

						<li @click="tomenumdei('/moPersonal/quiz')">
							<i class="iconfont icon-wenhao-"></i>
							<a>我的提问</a>
							<i class="iconfont icon-youjiantou"></i>
						</li>

						<li @click="tomenumdei('/moPersonal/acacirle')">
							<i class="iconfont icon-icon-"></i>
							<a>我的学术圈</a>
							<i class="iconfont icon-youjiantou"></i>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<div class="mowhite"></div>
		<!--  -->
	</div>
</template>

<script>
	// import router from '@/router/index'
	export default {
		name: 'moPersonal',
		data() {
			return {
				mouserName: '',
			}
		},
		methods: {
			toHome(){
				uni.switchTab({
					url:'/pages/index/index'
				})
			},
			mologin() {
				this.$uniRouter.push({
					path: '/login',
				})
			},
			// 跳转注册页面
			morefgit() {
				var therer = this.$localStorage.getItem('theRequest')
				if (therer) {
					this.$uniRouter.push({
						path: '/register',
						query: {
							p: this.$localStorage.getItem('theRequest')
						}
					})
				} else {
					this.$uniRouter.push({
						path: '/register',
					})
				}
			},
			// 跳转个人中心页面
			tomenumdei(url) {
				if (!this.$sessionStorage.getItem("userName")) {
					this.$uniRouter.push({
						path: "/login",
					});
					return;
				}
				this.$uniRouter.push({
					path: url
				})
			},
			// 注销
			close() {
				this.$sessionStorage.removeItem('userName');
				this.$uniRouter.push({
					path: '/login'
				})
			},
			tomenuVIP() {
				this.$uniRouter.push({
					path: '/moPersonal/vipcenter'
				})
			}
		},
		onShow() {
			this.mouserName = this.$sessionStorage.getItem('userName')
		},
		mounted() {

		}
	}
</script>

<style lang="less" scoped>
	@media screen and (min-width:1010px) {
		.personalCont_Cont_mob {
			display: none;
		}

		.mowhite {
			display: none;
		}
	}

	@media screen and (max-width:1010px) {
		.mowhite {
			width: 100%;
			height: 186rpx;
			background: #fff;
		}

		.personalCont_Cont_mob {
			width: 100%;
			margin: 0 auto;

			.personalCont_Cont_mob_info {
				width: 100%;
				height: 360rpx;
				background: url('../../static/mopersonal/bg.png')no-repeat;
				background-size: cover;

				.personalCont_Cont_mob_info_top {
					width: 94%;
					height: 40rpx;
					margin: 0 auto;
					position: relative;
					top: 38rpx;
					line-height: 40rpx;

					a {
						font-size: 28rpx;
						color: #fff;
					}

					text {
						font-size: 28rpx;
						color: #fff;
						float: left;
						background: transparent;
						border-left: none !important;
					}

					a:nth-child(2) {
						float: right;
					}
				}

				.logiregi {
					display: flex;
					width: 240rpx;
					height: 70rpx;
					border: 1rpx solid #fff;
					border-radius: 20rpx;
					margin: 0px auto;
					margin-top: 106rpx;
					padding-left: 100rpx;
					text-align: center;
					line-height: 70rpx;

					a {
						color: #fff;
						text-align: center;
						font-size: 32rpx;
						line-height: 70rpx;
					}
				}

				.personalCont_Cont_mob_userInfo {
					width: 100%;
					margin: 0 auto;
					color: #fff;
					position: relative;
					top: 58rpx;
					text-align: center;
				}
			}

			.personalCont_Cont_mob_content {
				width: 100%;
				height: 100%;
				background: #f0f0f0;

				.personalCont_Cont_mob_content_personInfo_tit {
					// width: 100%;
					height: 78rpx;
					color: #000;
					font-size: 32rpx;
					padding-left: 20rpx;
					line-height: 78rpx;
				}

				ul {
					width: 94%;
					height: 100%;
					margin: 0 auto;

					a:nth-child(1) {
						li:nth-child(1) {
							border-top: 1px solid #DFDFDF;
						}
					}

					li:nth-child(1) {
						border-top: 1px solid #DFDFDF;
					}

					li {
						list-style: none;
						width: 90%;
						height: 100rpx;
						color: #000;
						font-size: 28rpx;
						padding-left: 72rpx;
						line-height: 100rpx;
						border-bottom: 1px solid #DFDFDF;

						a {
							color: #000;
							font-size: 34rpx;
							position: absolute;
							left: 136rpx;
						}

						i {
							font-size: 44rpx !important;
						}

						i:nth-child(3) {
							position: absolute;
							font-size: 24rpx;
							right: 46rpx;
							color: #dfdfdf;
						}

						i:nth-child(1) {
							position: absolute;
							left: 60rpx;
							font-size: 32rpx;
						}
					}
				}

				.personalCont_Cont_mob_content_personInfo {
					width: 100%;
					height: auto;
					background: #fff;
				}

				.personalCont_Cont_mob_content_wenxiInfo {
					width: 100%;
					height: auto;
					background: #fff;
					margin-top: 20rpx;
				}

				.personalCont_Cont_mob_content_activeInfo {
					width: 100%;
					height: auto;
					background: #fff;
					margin-top: 20rpx;
				}
			}

			.personalCont_Cont_mob_info_content {
				margin-top: 84rpx;
			}

			.personalCont_Cont_mob_info_left {
				width: 424rpx;
				height: 148rpx;
				float: left;
				margin-left: 6%;
				position: relative;

				.personalCont_Cont_mob_info_left_touxiang {
					width: 140rpx;
					height: 140rpx;
					border-radius: 50%;
					background: #fff;
					position: relative;

					i {
						color: #A2D6FF;
						font-size: 164rpx;
						position: absolute;
						top: -46rpx;
						left: -10rpx;
					}
				}

				.personalCont_Cont_mob_userInfoB {
					position: absolute;
					left: 35%;
					top: 36%;
					color: #fff;
					font-size: 28rpx;
					margin-left: 4%;
				}
			}

			.personalCont_Cont_mob_info_right {
				width: 180rpx;
				height: 70rpx;
				border: 1px solid #fff;
				float: right;
				border-radius: 50rpx;
				line-height: 70rpx;
				text-align: center;
				color: #fff;
				font-size: 32rpx;
				margin-top: 36rpx;
				margin-right: 4%;
			}
		}
	}
</style>
